<!-- 
    将app打包成桌面应用才会用到该组件，导航栏，增加PC应用的放大缩小，最小化，关闭按钮
    用法：<f7-user-navbar title="xxxx"></f7-user-navbar>
 -->
<template id="f7-user-navbar">
  <f7-navbar>
    <f7-nav-left v-if="packageType != 'app'">
      <f7-link v-if="back" back icon-material="arrow_back" style="color:#3096ef"></f7-link>
      {{title}}
    </f7-nav-left>
    <f7-nav-left v-if="packageType == 'app'">
      <f7-link v-if="back" back icon-material="arrow_back"></f7-link>
    </f7-nav-left>

    <f7-nav-title v-if="packageType == 'app'">{{title}}</f7-nav-title>

    <f7-nav-right v-if="packageType == 'app'"></f7-nav-right>
    <f7-nav-right v-if="packageType != 'app'">
      <f7-weather
        format="{city} {icon} {observe.weather} {observe.degree}°"
        style="font-size: 16px;padding-right: 20px;"
      ></f7-weather>
      <f7-link popover-open=".user-popover" class="user-info oper_btn">
        <f7-icon style="padding-top: 18px;padding-right: 5px;">
          <img style="width: 38px;" src="../../assets/img/component/surface_user.png" />
        </f7-icon>
        {{currentUser.userName}}
        <span style="right: 26px;top: -1px;">
          <img style="width: 15px;" src="../../assets/img/component/surface_user_arrow.png" />
        </span>
      </f7-link>

      <f7-popover class="user-popover" style="width: 320px;">
        <div class="userInfo">
          <f7-list media-list>
            <f7-list-item
              popover-close
              link="/setting/user/"
              :title="currentUser.userName"
              :subtitle="currentUser.lastLoginDate | datetime | prefix('最近登录：')"
            >
              <f7-icon slot="media">
                <img src="../../assets/img/component/set_user.png" class="user_img" />
              </f7-icon>
            </f7-list-item>
          </f7-list>
        </div>
        <f7-list class="iconslist">
          <f7-list-item popover-close title="修改密码" link="/setting/editPassword"></f7-list-item>
          <f7-list-item popover-close title="关于" link="/setting/about/"></f7-list-item>
        </f7-list>

        <f7-list style="margin-top:16px" class="surface-edit">
          <f7-list-item>
            <f7-list-item-cell>
              <f7-list-item-row>
                <f7-list-item-cell></f7-list-item-cell>
                <f7-list-item-cell class="text-align-center logout">
                  <f7-link popover-close text="退出登录" @click="logout"></f7-link>
                </f7-list-item-cell>
                <f7-list-item-cell></f7-list-item-cell>
              </f7-list-item-row>
            </f7-list-item-cell>
          </f7-list-item>
        </f7-list>
      </f7-popover>

      <f7-button @click="resize('window-min')" class="oper_btn">
        <f7-icon f7="minus"></f7-icon>
      </f7-button>
      <f7-button @click="resize('window-max')" class="oper_btn">
        <f7-icon f7="app"></f7-icon>
      </f7-button>
      <f7-button class="oper_btn"
        @click="resize('window-close')"
        style="font-size: 30px;line-height: 30px;"
      >
      <f7-icon f7="xmark"></f7-icon>
      </f7-button>
    </f7-nav-right>
    <slot name="subnavbar"></slot>
  </f7-navbar>
</template>
<style scoped>
.oper_btn {
  color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
}
.ios .button i.narrow {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: #aaa;
  margin-bottom: 7px;
}
.ios .button i.enlarge {
  display: inline-block;
  width: 15px;
  height: 13px;
  border: 2px solid #aaa;
}
.ios .button {
  color: #aaa;
  border: 0px none;
  line-height: 37px;
}
.ios .navbar .left a + a,
.ios .navbar .right a + a {
  margin-left: 3px;
}
</style>

<script>
export default {
  data: function() {
    return {
      currentUser: {},
      packageType: "app"
    };
  },
  props: {
    title: {
      type: String
    },
    back: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    this.currentUser = this.$f7.data.currentUser;
    this.packageType = this.$framework.config.setting.packageType;
  },
  methods: {
    logout() {
      this.$framework.account.logout();
    },
    resize(type) {
      if (type == "window-close") {
        this.$f7.dialog.confirm("确定退出应用吗？", r => {
          if (r) {
            window.ipcRenderer.send(type);
          }
        });
      } else {
        window.ipcRenderer.send(type);
      }
    }
  }
};
</script>